<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
	<meta name="viewport" content="width=device-width" />
	<title>Services - Botany Template</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
    <!--
    Botany Template
    http://www.templatemo.com/preview/templatemo_391_botany
    -->
	<link href="../static/css/font-awesome.min.css" rel="stylesheet">
	<link href="../static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="../static/css/templatemo_style.css" rel="stylesheet" type="text/css">

	<!-- HTML 5 shim for IE backwards compatibility -->
		<!-- [if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
		</script>
		<![endif]-->
	<!--
	Credits
	Equal Height Columns - http://www.hongkiat.com/blog/css-equal-height/
	Font Awesome by Dave Gandy - http://fontawesome.io
--><style>
        label {
            color: white;
        }
    </style>
</head>
<body class="templatemo_flower_1">
	<div id="main_container">
		<div class="container" id="services">
			<div class="row col-wrap">
				<div id="left_container" class="col col-md-3 col-sm-12">
					<div class="templatemo_logo">
						<a href="#"><img src="../static/images/templatemo_logo.png" alt="Botany Theme"></a>
					</div>
                    <nav id="main_nav">
                        <ul class="nav">
                            <li><a href="index.html">首页</a></li>
                            <li><a href="about.html">数据收集</a></li>
                            <li class="active"><a href="services.html">每月pm2.5总和分析</a></li>
                            <li><a href="portfolio.html">每月so2平均指数分析</a></li>
                            <li><a href="contact.html">全年空气质量等级分析</a></li>
                        </ul>
                    </nav> <!-- nav -->

					<div>
						<a href="#"><img src="../static/images/facebook.png" alt="Like us on Facebook"></a>
						<a href="#"><img src="../static/images/twitter.png" alt="Follow us on Twitter"></a>
						<a href="#"><img src="../static/images/rss.png" alt="RSS feeds"></a>
					</div>
				</div>
				<div id="right_container" class="col col-md-9 col-sm-12">
					<div class="row">
                    	<div class="col col-md-12">
                        	<h2>数据分析图表</h2>
                        </div>
                    </div>
					<div>
                        <form action="/contact.html" method="post">
                            <label for="city">选择城市：</label>
                            <select name="city" id="city">
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                            </select>
                            <label for="year">选择年份：</label>
                            <select name="year" id="year">
                                <option value="2020">2020</option>
                                <option value="2021">2021</option>
                            </select>
                            <button type="submit">生成图表</button>
                        </form>
                    </div>
					{% for jsfile_name in script_list %}
                       <script src="{{host}}/{{jsfile_name}}.js"></script>
                    {% endfor %}
					{{myechart|safe}}
				</div>
			</div>
			<footer class="row credit">
				<div class="col col-md-12">
					<div id="templatemo_footer">
						Copyright © 2084 <a href="#">Company Name</a>
					</div>
				</div>
			</footer>
		</div>		
	</div>
    <!-- templatemo 391 botany -->
</body>
</html>